<template>
  <div class="not-found">
    <div class="content">
      <van-empty image="error" description="页面不存在">
        <template #image>
          <div class="custom-image">404</div>
        </template>
        <van-button round type="primary" @click="goHome">返回首页</van-button>
      </van-empty>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()

const goHome = () => {
  router.replace('/home')
}
</script>

<style scoped lang="scss">
.not-found {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: $background-color;

  .content {
    width: 80%;
    text-align: center;

    .custom-image {
      font-size: 80px;
      font-weight: bold;
      color: $primary-color;
      margin-bottom: $padding-lg;
    }
  }
}
</style> 